<template>
    <div class="menu-list">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin/menu/list' }">菜单管理</el-breadcrumb-item>
        <el-breadcrumb-item>菜单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card tree">
        <div slot="header" class="clearfix">
          <span>菜单列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="add({id:0})">添加顶级菜单</el-button>
        </div>
        <div >
          <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            border
            lazy
            :load="load"
            default-expand-all
            row-key="id">
            <el-table-column
              label="#"
              width="70">
            </el-table-column>
            <el-table-column
              prop="name"
              label="菜单名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="url"
              label="URL">
            </el-table-column>
            <el-table-column
              prop="icon"
              label="图标">
            </el-table-column>
            <el-table-column
              prop="module"
              label="所属模块">
            </el-table-column>
            <el-table-column
              prop="sort"
              label="排序">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button @click="add(scope.row)" type="success" icon="el-icon-circle-plus" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-dialog title="菜单操作" :visible.sync="dialogFormVisible" >
        <el-form :model="form" ref="menu" :rules="rules">
          <el-form-item label="菜单名称"  prop="name">
            <el-input v-model="form.name" ></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <el-input v-model="form.url" ></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="form.icon" ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" ></el-input>
          </el-form-item>
          <el-form-item label="slug" prop="slug">
            <el-input v-model="form.slug" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save(isAdd)">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
    export default {
      name: "MenuList",
      data(){
        return {
          tableData: [],
          dialogFormVisible:false,
          form:{
            pid:0,
            module:'admin'
          },
          isAdd:false,
          rules:{
            name:[
              { required: true, message: '请输入菜单名称', trigger: 'blur' },
            ],
            url:[
              { required: true, message: '请输入url', trigger: 'blur' },
            ],
            icon:[
              { required: true, message: '请输入图标', trigger: 'blur' },
            ],
            slug:[
              { required: true, message: '请输入slug', trigger: 'blur' },
            ],
            sort:[
              { required: true, message: '请输入排序', trigger: 'blur' },
            ]
          }
        }
      },
      created(){
        this.getMenus().then(res=>{
          //console.log(res);
          this.tableData = res;
        })
      },
      methods:{
        getMenus(id = 0){
          return new Promise((resolve, reject) => {
            this.axios.get(`/api/admin/menu/get-children/${id}`).then(res=>{
              resolve(res.data.data);
              //console.log(res);
            }).catch(err=>{
              reject(err.data);
            });
          });
        },
        load(tree, treeNode, resolve){

          this.getMenus(tree.id).then(res=>{
            resolve(res);
          })
        },
        add(row){
          this.dialogFormVisible = true;
          this.form.pid = row.id;
          this.isAdd = true;
        },
        save(isAdd){
          if(isAdd){
            this.axios.post('/api/admin/menu',this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              //this.tableData[this.form.pid].children.push(this.form);
              //console.log(this.tableData,this.form.pid)
              this.form = {pid:0,module:"admin"};
              this.dialogFormVisible = false;
              //TODO::优化
              this.getMenus().then(res=>{
                this.tableData = res;
              })
            }).catch(err=>{
              //this.$message.error(err.response.data.message)
              console.log(err);
            });
          }
          else{
            this.axios.put(`/api/admin/menu/${this.form.id}`,this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              //this.tableData[this.form.pid].children.push(this.form);
              //console.log(this.tableData,this.form.pid)
              this.form = {pid:0,module:"admin"};
              this.dialogFormVisible = false;
            }).catch(err=>{
              //this.$message.error(err.response.data.message)
              console.log(err);
            });
          }
        },
        edit(row){
          this.dialogFormVisible = true;
          //this.form.pid = row.id;
          this.form = row;
          this.isAdd = false;
        },
        del(row){
          this.$confirm('你确认要做此操作吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //this.setUserStatus(row)
            if (row.hasChildren == true){
              this.$message.error('该目录还有子目录，不能删除');
            }
            else{
              this.axios.delete(`/api/admin/menu/${row.id}`).then(res=>{
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                //TODO::优化
                this.getMenus().then(res=>{
                  this.tableData = res;
                })
              }).catch(err=>{
                this.$message.error(err.response.data.message)
              });
            }

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });

          });
        }
      },
    }
</script>

<style scoped lang="less">
.tree{
  margin-top: 10px;

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
